<template>
  <van-popup
    v-model:show="modelValue"
    position="bottom"
    :style="{height: '24%'}"
    @close="onClose"
  >
    <div :style="{width: '90%', margin: '0 auto', padding: '20px 0'}">
      <van-button :style="{ marginBottom: '10px' }" color="#1989fa" block @click="handlePayOrder(orderNo, 1, isInit)">支付宝支付</van-button>
      <van-button color="#4fc08d" block @click="handlePayOrder(orderNo, 2, isInit)">微信支付</van-button>
    </div>
  </van-popup>
</template>

<script setup>
import {useRoute} from 'vue-router'
import useOrder from '@/hooks/useOrder'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
    required: true,
  },
  orderNo: {
    type: String,
    default: '',
  },
  isInit: {
    type: Boolean,
    default: false,
  }
})
const emits = defineEmits(['update:modelValue'])

const {handlePayOrder} = useOrder(useRoute())

// function handlePayOrder() {
//   console.log(props.modelValue)
//   emits('update:modelValue', false)
// }

function onClose() {
  emits('update:modelValue', false)
}
</script>